# Component: Consent Cookie

GDPR/Policy notification banner

Global Overlay

![[Pasted image 20260426082550.png]]

### BEM Anatomy

| Type      | Class Name           | Description                                                                      |
| --------- | -------------------- | -------------------------------------------------------------------------------- |
| ==Block== | `.as-consent-cookie` | The sticky bottom container. Uses `position: fixed` and a high `z-index` (2000). |
| Element   | `__content`          | The text wrapper containing the title and policy description.                    |
| Element   | `__title`            | The header for the notice (H4). Resets bottom margin for compactness.            |
| Element   | `__description`      | The primary message area. Styles nested `<p>` tags for consistent spacing.       |
| Element   | `__actions`          | The container for the confirmation button.                                       |
| Element   | `__button`           | The "Accept" button. Centered vertically via `align-self: center`.               |

### Contextual Theming

This component leverages Bootstrap 5's CSS variables for its "Info" state, ensuring accessibility and theme consistency:

##### Generated HTML

```html
<div class="as-consent-cookie">
    <div class="as-consent-cookie__content">
        <h4 class="as-consent-cookie__title">Cookie Policy</h4>
        <div class="as-consent-cookie__description">
            <p>We use cookies to improve your experience...</p>
        </div>
    </div>
    <div class="as-consent-cookie__actions">
        <button class="btn btn-info as-consent-cookie__button">
            Accept
        </button>
    </div>
</div>
```

##### SCSS

```scss
.as-consent-cookie {
  display: flex !important;
  position: fixed;
  bottom: 0;
  
  // Bootstrap Info Theme Variables
  color: var(--bs-info-text-emphasis);
  background: var(--bs-info-bg-subtle);
  border-top: 2px solid var(--bs-info-border-subtle);

  &__content {
    flex-grow: 1;
  }

  &__button {
    align-self: center;
  }
}
```

